<template>
    <div class="right-content">
      <!-- 头部查询区域 -->
        <el-form :inline="true" :model="dataForm2" class="demo-form-inline">
          <div style="display:inline-block">
            <!-- <el-form-item>
              <el-select v-model="dataForm2.region" placeholder="请选择" style="width:120px">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item>
              <el-input v-model="dataForm2.devId" id="minput" placeholder="请输入设备编号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchDataList()">查 询</el-button>
              <el-button @click="reset()">重 置</el-button>
              <el-button type="primary" @click="handleCreate()">新增设备</el-button>
            </el-form-item>
          </div>
          <!-- <el-form-item style="right: 100px">
            <el-button type="primary" @click="onSubmit">导 入</el-button>
            <el-button type="primary" @click="onSubmit">导 出</el-button>
          </el-form-item> -->
        </el-form>
        <!-- 内容区域 -->
        <el-table
          ref="MDeviceDataList"
          border
          :data="MDeviceDataList"
          :header-cell-style="headerStyle"
          :cell-style="cellStyle"
        >
          <!-- 复选框 -->
          <!-- <el-table-column
            type="selection"
            width="50"
            header-align="center"
            align="center">
          </el-table-column> -->
          <el-table-column
            type="index"
           :index="getIndex"
            width="80"
            label="序号"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            width="80"
            label="id"
            prop="id"
            header-align="center"
            align="center"
            v-if="flag === 1">
          </el-table-column>
          <el-table-column
            prop="devId"
            width="240"
            label="设备编号"
            header-align="center"
            align="center"
            >
            </el-table-column>
          <el-table-column
            prop="devName"
            width="240"
            label="设备名称"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            prop="devClass"
            width="170"
            label="设备类别"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            prop="devPrice"
            width="160"
            label="单价"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            prop="devAmount"
            width="192"
            label="数量"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            width="210"
            fixed="right"
            header-align="center"
            align="center"
            label="操作">
            <template slot-scope="scope">
              <el-button size="small" type="primary" style="width:20;height: 30px;" @click="handleUpdate(scope.row)">修改</el-button>
              <el-button size="small" type="danger" style="width:20;height: 30px;" @click="handleDelete(scope.row)">删除</el-button>
              <!-- <el-link type="primary" @click="handleUpdate(scope.row)">修改</el-link>
              <el-link type="danger" @click="handleDelete(scope.row)">删除</el-link> -->
            </template>
          </el-table-column>
        </el-table>
          <!-- 分页器 -->
          <div class="block">
            <el-pagination
              align="right"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pageSize"
              layout="total, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        <!-- 弹窗，新增或修改 -->
        <el-dialog
              :title="textMap[dialogStatus]"
              :close-on-click-modal=true
              :visible.sync="dialogFormVisible"
              >
              <el-form
              :rules="rules"
              class="Addform"
              :model="dataForm"
              ref="dataForm"
              @keyup.enter.native="dataFormSubmit()"
              label-width="110px"
              label-position="right"
              style="width: 500px; margin-left: 60px">
                <div class="right">
                  <el-row :gutter="15">
                      <el-form-item label="设备名称" style="width: 370px;" prop="devName" >
                        <el-input v-model="dataForm.devName" ></el-input>
                      </el-form-item>
                      <el-form-item label="设备类型" style="width: 370px;" prop="devClass">
                        <el-input v-model="dataForm.devClass" ></el-input>
                      </el-form-item>
                      <el-form-item label="价格" style="width: 370px;" prop="devPrice">
                        <el-input v-model.number="dataForm.devPrice" ></el-input>
                      </el-form-item>
                      <el-form-item label="数量" style="width: 370px;" prop="devAmount">
                        <el-input v-model.number="dataForm.devAmount" ></el-input>
                      </el-form-item>
                  </el-row>
                </div>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogStatus === 'create' ? createData('dataForm') : updateData()">确 定</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">取 消</el-button>
              </span>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'MeetingRoomDevice',
  data() {
    // 价格校验
    var checkDPrice = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入价格'))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (value < 0) {
            callback(new Error('价格必须大于0'))
          } else {
            callback()
          }
        }
      }, 1000)
    }
    // 数量校验
    var checkDAmount = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入数量'))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (value < 0) {
            callback(new Error('价格必须大于0'))
          } else {
            callback()
          }
        }
      }, 1000)
    }
    return {
      options: [{
        value: '设备编号',
        label: '设备编号'
      }, {
        value: '设备名称',
        label: '设备名称'
      }, {
        value: '设备类别',
        label: '设备类别'
      }],
      value: '',
      // *******翻页***********
      MDeviceDataList: [],
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页选定的显示条数
      total: 0,
      // **********************
      dataForm2: {}, // 想要查询的设备数据
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      dialogFormVisible: false,
      dataForm: {
        devName: '',
        devClass: '',
        devPrice: '',
        devAmount: ''
      },
      postId: 0,
      rules: {
        devName: [
          { required: true, message: '请输入设备名称', trigger: 'blur' }
        ],
        devClass: [
          { required: true, message: '请输入设备类型', trigger: 'blur' }
        ],
        devPrice: [
          { validator: checkDPrice, trigger: 'blur' }
        ],
        devAmount: [
          { validator: checkDAmount, trigger: 'blur' }
        ]
      },
      flag: 0
    }
  },
  // 生命周期
  mounted() {
    this.getDataList()
  },
  // 页码变化
  // const service = axios.create({
  //   baseURL:'localhost:8080'
  // }),
  watch: {
    tableData(newValue, oldValue) {
      this.currentData = newValue.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    },
    CurrentPage(newValue, oldValue) {
      this.currentPage = this.tableData.slice((newValue - 1) * this.pageSize, newValue * this.pageSize)
    }
  },
  methods: {
    reset() {
      this.getDataList()
      document.getElementById('minput').value = ''
    },
    // 表格行高
    cellStyle() {
      return {
        'font-size': '14px',
        height: '45px',
        padding: '0'
      }
    },
    // 表头行高
    headerStyle() {
      return {
        height: '55px'
      }
    },
    // ****************翻页*************
    // 改变当前页码
    handleCurrentChange(val) {
      this.currentPage = val
      this.getDataList()
    },
    // 序号
    getIndex(index) {
      return index + (this.currentPage - 1) * this.pageSize + 1
    },
    // **********************************
    // 获取数据列表
    getDataList() {
      this.getRequest('/device' + '/' + this.currentPage + '/' + this.pageSize).then((resp) => {
        if (resp) {
          // console.log('-------------------------------------------')
          console.log(resp)
          this.MDeviceDataList = resp.list
          this.total = resp.total
          console.log(this.total)
        } else {
          console.log('失败')
        }
      })
    },
    // 查询
    searchDataList(data) {
      this.dataLoading = true
      this.getRequest('/device/' + this.dataForm2.devId).then((resp) => {
        if (resp) {
          // console.log('-------------------------------------------')
          console.log(resp)
          this.MDeviceDataList = resp.data
        } else {
          console.log('查询失败')
        }
      })
      this.dataLoading = false
      // this.getDataList()
    },
    // 新增
    handleCreate() {
      this.dialogFormVisible = true
      this.dialogStatus = 'create'
    },
    // createData() {
    //   if (this.dataForm.devName === undefined || this.dataForm.devClass === undefined || this.dataForm.devPrice === undefined ||
    //    this.dataForm.devAmount === undefined) {
    //     this.$message.error('请完成所有必填项')
    //   } else {
    // this.postRequest('/device', {
    //   devName: this.dataForm.devName,
    //   devClass: this.dataForm.devClass,
    //   devPrice: this.dataForm.devPrice,
    //   devAmount: this.dataForm.devAmount
    // }).then((resp) => {
    //       if (resp) {
    //         console.log(resp)
    //         this.$message.success(resp.msg)
    //         this.dataForm = {}
    //         this.getDataList()
    //       } else {
    //         console.log('新增失败')
    //       }
    //     })
    //     this.dialogFormVisible = false
    //   }
    // },
    createData(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!')
          this.postRequest('/device', {
            devName: this.dataForm.devName,
            devClass: this.dataForm.devClass,
            devPrice: this.dataForm.devPrice,
            devAmount: this.dataForm.devAmount
          })
            .then(res => {
              console.log('res=>', res)
              if (res.msg === '新增成功') {
                this.$message.success(res.msg)
              } else {
                this.$message.error('新增失败')
              }
              this.dataForm = {}
              this.getDataList()
            })
            .catch(err => {
              console.log('err=>', err)
            })
          this.getDataList()
          this.dialogFormVisible = false
          this.dataForm = {}
        } else {
          this.$message.error('请完成所有必填项')
          console.log('error submit!!')
          return false
        }
      })
    },
    // 编辑
    handleUpdate(data) {
      this.dialogFormVisible = true
      this.dialogStatus = 'update'
      this.postId = data.id
      this.dataForm = data
    },
    updateData() {
      this.putRequest('/device', {
        devId: this.dataForm.devId,
        devName: this.dataForm.devName,
        devClass: this.dataForm.devClass,
        devPrice: this.dataForm.devPrice,
        devAmount: this.dataForm.devAmount
      }).then((resp) => {
        if (resp) {
          console.log(resp)
          if (resp.msg === '更新成功') {
            this.$message.success(resp.msg)
          } else {
            this.$message.error('更新失败')
          }
          this.getDataList()
        } else {
          console.log('更新失败')
        }
      })
      this.getDataList()
      this.dialogFormVisible = false
      // this.getDataList()
    },
    // 删除
    handleDelete(data) {
      this.$confirm('此操作将永久删除【' + data.devName + '】设备的所有信息，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.deleteRequest('/device/' + data.devId).then((resp) => {
          console.log(resp)
          this.$message.success(resp.msg)
          this.getDataList()
          // this.$forceUpdate()
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
      this.getDataList()
    },
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>

<style scoped>
.right{
  height: 280px;
}.demo-form-inline{
  width: 97%;
  display: flex;
  justify-content: space-between;
  margin: 20px auto;
  margin-bottom: 0px;
}
.el-table{
  width: 97%;
  margin: 0px auto
}
.el-dialog__body{
  height: 150px !important;
  overflow: auto;
}
.el-dialog{
  width:40% !important;
}
/** 分页器 start  */
.block {
  position: absolute;
  top: 94% !important;
  right: 1.5%;
}
.el-pagination {
  align-items: center;
}
.el-pagination /deep/ span:not([class*=suffix]) {
  font: 1vw '宋体' !important;
  padding-top: 0px;
}
.el-pagination /deep/ .el-pagination__total {
  padding-top: 5px !important;
}
.el-pagination /deep/ .el-input__inner {
  font: 1vw '宋体' !important;
}
/** 分页器 end */
</style>
